<template>
  <div :class="{ plate: true, 'is-check': isCheck }">
    <div class="name">{{ name }}</div>
    <div class="plate-container">
      <div
        class="plate-num"
        :class="plateData.length > 1 ? '' : 'w100'"
        v-for="(item, index) in plateData"
        :key="index"
      >
        <div class="title" v-html="item.label"></div>
        <div class="value">
          <img v-if="index === 'radio' && item.value !== '--'" :src="dealTag(item.value)" alt="" />
          <div class="num" v-html="index === 'radio' ? item.value + '%' : item.value"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isCheck: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: '',
    },
    numKey: {
      type: String,
      default: '',
    },
    plateData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      twoPlateJjl: {
        low: 15,
        middle: 25,
      },
      otherPlateJjl: {
        low: 30,
        middle: 45,
      },
    };
  },
  methods: {
    dealTag(value) {
      if (this.numKey === '2') {
        return this.dealTagInfo(value, this.twoPlateJjl.low, this.twoPlateJjl.middle);
      } else {
        return this.dealTagInfo(value, this.otherPlateJjl.low, this.otherPlateJjl.middle);
      }
    },
    dealTagInfo(value, low, middle) {
      const jjl = Number(value);
      const conditionOptions = [
        {
          condition: jjl >= 0 && jjl <= low,
          url: '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/129f7f3a-e410-4854-b59c-fdb72baa3faa.png',
        },
        {
          condition: jjl > low && jjl <= middle,
          url: '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/f29edd64-2308-4a9e-a828-d5c49b4dab71.png',
        },
        {
          condition: jjl > middle,
          url: '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/7e2111fe-b5c9-44de-9b29-b9a1aa190fd9.png',
        },
      ];
      for (const conditionItem of conditionOptions) {
        if (conditionItem.condition) {
          return conditionItem.url;
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.w100 {
  width: 100% !important;
}
.plate {
  width: 188px;
  min-width: 1.88rem;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  padding: 20px 0;
  box-sizing: border-box;
  margin-right: 16px;
  &.is-check {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
    &::after {
      position: absolute;
      content: '';
      .bg-mixins;
      background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/42f41994-4793-4ad5-96f4-93cc076c47de.png');
      width: 24px;
      height: 12px;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .name {
    font-family: PingFangSC-Medium;
    font-size: 28px;
    color: rgba(0, 0, 0, 0.84);
    letter-spacing: 0;
    text-align: center;
    line-height: 36px;
    font-weight: bold;
    padding-bottom: 12px;
  }
  .plate-container {
    display: flex;
    width: 100%;
    .plate-num {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 16px;
      .title {
        font-family: PingFangSC-Regular;
        font-size: 22px;
        color: rgba(0, 0, 0, 0.4);
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 400;
        white-space: nowrap;
        padding-bottom: 4px;
      }
      .value {
        height: 40px;
        display: flex;
        align-items: center;
        img{
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
        .num {
          font-family: THS;
          font-size: 28px;
          color: #ff2436;
          letter-spacing: 0;
          line-height: 28px;
          font-weight: 700;
          .typeface {
            font-family: PingFangSC-Regular;
            font-weight: 400;
          }
        }
        /deep/ .atom-tag {
          width: 20px;
          height: 20px;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: auto;
          margin-right: 4px;
          span {
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            font-size: 28px;
          }
        }
      }
    }
  }
}
</style>
